<template>
  <div class="customer-detail-container">
    <el-card class="customer-detail-card">
      <template #header>
        <div class="card-header">
          <el-button
            type="text"
            icon="ArrowLeft"
            @click="handleBack"
            class="back-button"
            >返回</el-button
          >
          <span>客户详情</span>
        </div>
      </template>

      <!-- 客户基本信息 -->
      <div class="form-section">
        <h3 class="section-title">基本信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <label>客户名称:</label>
            <span>{{ customerInfo.name }}</span>
          </div>
          <div class="info-item">
            <label>客户类型:</label>
            <span>{{ customerInfo.type }}</span>
          </div>
          <div class="info-item">
            <label>统一社会信用代码:</label>
            <span>{{ customerInfo.creditCode }}</span>
          </div>
          <div class="info-item">
            <label>成立时间:</label>
            <span>{{ customerInfo.establishmentDate }}</span>
          </div>
          <div class="info-item">
            <label>企业规模:</label>
            <span>{{ customerInfo.scale }}</span>
          </div>
          <div class="info-item">
            <label>行业分类:</label>
            <span>{{ customerInfo.industry }}</span>
          </div>
          <div class="info-item">
            <label>客户等级:</label>
            <el-tag :type="getCustomerLevelType(customerInfo.level)">{{
              customerInfo.level
            }}</el-tag>
          </div>
          <div class="info-item">
            <label>重要程度:</label>
            <span
              class="importance-tag"
              :class="`importance-${customerInfo.importance.toLowerCase()}`"
              >{{ customerInfo.importance }}</span
            >
          </div>
        </div>
      </div>

      <!-- 联系方式 -->
      <div class="form-section">
        <h3 class="section-title">联系方式</h3>
        <div class="info-grid">
          <div class="info-item">
            <label>主要联系人:</label>
            <span>{{ customerInfo.mainContactPerson }}</span>
          </div>
          <div class="info-item">
            <label>联系电话:</label>
            <span>{{ customerInfo.mainContactPhone }}</span>
          </div>
          <div class="info-item">
            <label>邮箱:</label>
            <span>{{ customerInfo.email }}</span>
          </div>
          <div class="info-item">
            <label>地址:</label>
            <span>{{ customerInfo.address }}</span>
          </div>
          <div class="info-item">
            <label>邮编:</label>
            <span>{{ customerInfo.zipCode }}</span>
          </div>
        </div>
      </div>

      <!-- 业务信息 -->
      <div class="form-section">
        <h3 class="section-title">业务信息</h3>

        <!-- 当前使用产品 -->
        <div class="business-section">
          <h4 class="subsection-title">当前使用产品</h4>
          <div class="product-list">
            <div
              v-for="(product, index) in customerInfo.products"
              :key="index"
              class="product-item"
            >
              <div class="product-info">
                <div class="product-name">{{ product.name }}</div>
                <div class="product-detail">{{ product.detail }}</div>
              </div>
              <div class="product-status">
                <el-tag
                  :type="product.status === '在用' ? 'success' : 'warning'"
                  :key="index"
                  >{{ product.status }}</el-tag
                >
                <div class="product-date">到期日: {{ product.expiryDate }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 合同信息 -->
        <div class="business-section">
          <h4 class="subsection-title">合同信息</h4>
          <div class="contract-info">
            <div class="contract-item">
              <label>最近合同编号:</label>
              <span>{{ customerInfo.latestContract.code }}</span>
            </div>
            <div class="contract-item">
              <label>合同金额:</label>
              <span>¥{{ customerInfo.latestContract.amount }}</span>
            </div>
            <div class="contract-item">
              <label>签订日期:</label>
              <span>{{ customerInfo.latestContract.signDate }}</span>
            </div>
            <div class="contract-item">
              <label>生效日期:</label>
              <span>{{ customerInfo.latestContract.effectiveDate }}</span>
            </div>
            <div class="contract-item">
              <label>到期日期:</label>
              <span>{{ customerInfo.latestContract.expiryDate }}</span>
            </div>
          </div>
        </div>

        <!-- 费用情况 -->
        <div class="business-section">
          <h4 class="subsection-title">费用情况</h4>
          <div class="expense-info">
            <div class="expense-item">
              <label>月均消费:</label>
              <span>¥{{ customerInfo.monthlyExpense }}</span>
            </div>
            <div class="expense-item">
              <label>年度消费:</label>
              <span>¥{{ customerInfo.yearlyExpense }}</span>
            </div>
            <div class="expense-item">
              <label>费用状态:</label>
              <el-tag type="success">正常</el-tag>
            </div>
          </div>
        </div>
      </div>

      <!-- 走访记录 -->
      <div class="form-section">
        <h3 class="section-title">走访记录</h3>
        <el-table :data="customerInfo.visitRecords" style="width: 100%">
          <el-table-column
            prop="date"
            label="走访日期"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="manager"
            label="客户经理"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="purpose"
            label="走访目的"
            width="150"
          ></el-table-column>
          <el-table-column prop="summary" label="走访摘要"></el-table-column>
          <el-table-column
            prop="nextPlan"
            label="下次计划"
            width="120"
          ></el-table-column>
          <el-table-column label="操作" width="80" fixed="right">
            <template #default="scope">
              <el-button
                type="text"
                size="small"
                @click="viewVisitDetail(scope.row.id)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="next-visit-plan">
          <h4 class="subsection-title">下次走访计划</h4>
          <div class="plan-info">
            <div class="plan-item">
              <label>计划日期:</label>
              <span>{{ customerInfo.nextVisitPlan.date }}</span>
            </div>
            <div class="plan-item">
              <label>责任人:</label>
              <span>{{ customerInfo.nextVisitPlan.manager }}</span>
            </div>
            <div class="plan-item">
              <label>计划目的:</label>
              <span>{{ customerInfo.nextVisitPlan.purpose }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 关键人信息 -->
      <div class="form-section">
        <h3 class="section-title">关键人信息</h3>
        <el-table :data="customerInfo.keyPersons" style="width: 100%">
          <el-table-column
            prop="name"
            label="姓名"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="position"
            label="职务"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="department"
            label="部门"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="contactNumber"
            label="联系电话"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            width="180"
          ></el-table-column>
          <el-table-column prop="influence" label="影响力" width="80">
            <template #default="scope">
              <el-tag :type="getInfluenceType(scope.row.influence)">{{
                scope.row.influence
              }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 业务机会 -->
      <div class="form-section">
        <h3 class="section-title">业务机会</h3>
        <div class="opportunity-list">
          <div
            v-for="(opportunity, index) in customerInfo.businessOpportunities"
            :key="index"
            class="opportunity-item"
          >
            <div class="opportunity-header">
              <div class="opportunity-title">{{ opportunity.title }}</div>
              <div class="opportunity-meta">
                <span class="opportunity-type">{{ opportunity.type }}</span>
                <el-tag :type="getOpportunityLevelType(opportunity.level)">{{
                  opportunity.level
                }}</el-tag>
              </div>
            </div>
            <div class="opportunity-content">
              <p>{{ opportunity.description }}</p>
            </div>
            <div class="opportunity-footer">
              <span class="opportunity-status"
                >状态: {{ opportunity.status }}</span
              >
              <span class="opportunity-create-time"
                >创建时间: {{ opportunity.createTime }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
// import { ArrowLeft } from '@element-plus/icons-vue'

// 定义组件内使用的类型
interface Product {
  name: string;
  detail: string;
  status: string;
  expiryDate: string;
}

interface Contract {
  code: string;
  amount: string;
  signDate: string;
  effectiveDate: string;
  expiryDate: string;
}

interface VisitRecord {
  id: string;
  date: string;
  manager: string;
  purpose: string;
  summary: string;
  nextPlan: string;
}

interface NextVisitPlan {
  date: string;
  manager: string;
  purpose: string;
}

interface KeyPerson {
  name: string;
  position: string;
  department: string;
  contactNumber: string;
  email: string;
  influence: string;
}

interface BusinessOpportunity {
  title: string;
  type: string;
  level: string;
  description: string;
  status: string;
  createTime: string;
}

interface CustomerInfo {
  id: string;
  name: string;
  type: string;
  creditCode: string;
  establishmentDate: string;
  scale: string;
  industry: string;
  level: string;
  importance: string;
  mainContactPerson: string;
  mainContactPhone: string;
  email: string;
  address: string;
  zipCode: string;
  products: Product[];
  latestContract: Contract;
  monthlyExpense: string;
  yearlyExpense: string;
  visitRecords: VisitRecord[];
  nextVisitPlan: NextVisitPlan;
  keyPersons: KeyPerson[];
  businessOpportunities: BusinessOpportunity[];
}

// 使用路由
const route = useRoute();
const router = useRouter();

// 状态
const customerInfo = ref<CustomerInfo>({
  id: "cust001",
  name: "ABC贸易有限公司",
  type: "政企客户",
  creditCode: "91110105MA00123456",
  establishmentDate: "2010-05-15",
  scale: "中型企业",
  industry: "批发和零售业",
  level: "钻石客户",
  importance: "高",
  mainContactPerson: "李四",
  mainContactPhone: "13800138001",
  email: "contact@abctrade.com",
  address: "北京市朝阳区建国路88号",
  zipCode: "100022",
  products: [
    {
      name: "企业宽带增值套餐",
      detail: "1000M专线+50IP地址",
      status: "在用",
      expiryDate: "2024-12-31",
    },
    {
      name: "企业云通信平台",
      detail: "50用户授权+智能客服",
      status: "在用",
      expiryDate: "2024-09-30",
    },
    {
      name: "物联网智能连接服务",
      detail: "200个物联网终端接入",
      status: "在用",
      expiryDate: "2024-06-30",
    },
  ],
  latestContract: {
    code: "HT-2023-00123",
    amount: "1,200,000.00",
    signDate: "2023-01-15",
    effectiveDate: "2023-02-01",
    expiryDate: "2024-01-31",
  },
  monthlyExpense: "100,000.00",
  yearlyExpense: "1,200,000.00",
  visitRecords: [
    {
      id: "visit001",
      date: "2023-06-10",
      manager: "张三",
      purpose: "季度客户回访",
      summary:
        "客户对当前服务表示满意，提到需要扩容物联网终端数量，计划在下月进行业务洽谈。",
      nextPlan: "2023-07-15",
    },
    {
      id: "visit002",
      date: "2023-03-15",
      manager: "张三",
      purpose: "新业务推广",
      summary:
        "向客户介绍了最新的云通信平台升级方案，客户表示有兴趣，需要内部评估。",
      nextPlan: "2023-06-10",
    },
    {
      id: "visit003",
      date: "2022-12-20",
      manager: "李四",
      purpose: "年末客户关怀",
      summary:
        "拜访客户高层，了解客户下一年度的信息化规划，初步达成了合作意向。",
      nextPlan: "2023-03-15",
    },
  ],
  nextVisitPlan: {
    date: "2023-07-15",
    manager: "张三",
    purpose: "物联网业务扩容洽谈",
  },
  keyPersons: [
    {
      name: "王五",
      position: "总经理",
      department: "总经办",
      contactNumber: "13900139001",
      email: "wang.wu@abctrade.com",
      influence: "高",
    },
    {
      name: "赵六",
      position: "信息部主任",
      department: "信息部",
      contactNumber: "13700137001",
      email: "zhao.liu@abctrade.com",
      influence: "中",
    },
    {
      name: "孙七",
      position: "采购经理",
      department: "采购部",
      contactNumber: "13600136001",
      email: "sun.qi@abctrade.com",
      influence: "中",
    },
  ],
  businessOpportunities: [
    {
      title: "物联网终端扩容",
      type: "业务扩容",
      level: "高",
      description:
        "客户计划在全国范围内扩大物联网终端部署，预计增加500个终端，年增收入约30万元。",
      status: "跟进中",
      createTime: "2023-06-10",
    },
    {
      title: "云通信平台升级",
      type: "产品升级",
      level: "中",
      description:
        "客户考虑升级现有的云通信平台，增加视频会议和智能分析功能，预计年增收入约20万元。",
      status: "评估中",
      createTime: "2023-03-15",
    },
    {
      title: "5G专网建设",
      type: "新业务",
      level: "高",
      description:
        "客户计划建设企业内部5G专网，用于生产数据传输和智能设备连接，预计项目金额约200万元。",
      status: "初步接触",
      createTime: "2023-06-10",
    },
  ],
});

// 从路由参数中获取customerId
const customerId = route.params.id as string;

// 加载客户数据
const loadCustomerData = async (id: string) => {
  try {
    // 直接使用组件内部的模拟数据，不再调用后端API
    if (id !== "cust001") {
      customerInfo.value = {
        ...customerInfo.value,
        id,
        name: `客户${id}`,
        mainContactPhone: `13800138${id.slice(-3)}`,
      };
    }
  } catch (error) {
    console.error("加载客户数据失败:", error);
  }
};

// 返回上一页
const handleBack = () => {
  router.back();
};

// 查看走访详情
const viewVisitDetail = (visitId: string) => {
  // 在实际应用中，这里应该跳转到走访详情页
  console.log("查看走访ID:", visitId, "的详情");
};

// 获取客户等级对应的标签类型
const getCustomerLevelType = (level: string): string => {
  const typeMap: Record<string, string> = {
    钻石客户: "primary",
    铂金客户: "success",
    黄金客户: "warning",
    普通客户: "info",
  };
  return typeMap[level] || "info";
};

// 获取影响力对应的标签类型
const getInfluenceType = (influence: string): string => {
  const typeMap: Record<string, string> = {
    高: "danger",
    中: "warning",
    低: "info",
  };
  return typeMap[influence] || "info";
};

// 获取业务机会等级对应的标签类型
const getOpportunityLevelType = (level: string): string => {
  const typeMap: Record<string, string> = {
    高: "danger",
    中: "warning",
    低: "info",
  };
  return typeMap[level] || "info";
};

// 监听路由参数变化，重新加载数据
watch(
  () => route.params.id,
  (newId) => {
    if (newId) {
      loadCustomerData(newId as string);
    }
  }
);

// 组件挂载时加载数据
onMounted(() => {
  if (customerId) {
    loadCustomerData(customerId);
  }
});
</script>

<style lang="scss" scoped>
.customer-detail-container {
  padding: 20px;
  height: 100vh;
  box-sizing: border-box;
  font-size: 14px;
}

.back-button {
  margin-right: 10px;
  font-size: 14px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e4e7ed;
}

.subsection-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #303133;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.info-item {
  display: flex;
  flex-direction: column;
  
  label {
    color: #909399;
    font-size: 12px;
    margin-bottom: 5px;
  }
  
  span {
    color: #303133;
  }
}

.importance-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.importance-high {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fbc4c4;
}

.importance-medium {
  background-color: #fdf6ec;
  color: #e6a23c;
  border: 1px solid #fde293;
}

.importance-low {
  background-color: #edf2fc;
  color: #606266;
  border: 1px solid #c0c4cc;
}

.business-section {
  margin-bottom: 20px;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fafafa;
  border-radius: 4px;
  
  .product-info {
    flex: 1;
    
    .product-name {
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    .product-detail {
      color: #606266;
      font-size: 12px;
    }
  }
  
  .product-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    
    .product-date {
      color: #909399;
      font-size: 12px;
    }
  }
}

.contract-info,
.expense-info,
.plan-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.contract-item,
.expense-item,
.plan-item {
  display: flex;
  flex-direction: column;
  
  label {
    color: #909399;
    font-size: 12px;
    margin-bottom: 5px;
  }
  
  span {
    color: #303133;
  }
}

.next-visit-plan {
  margin-top: 20px;
  padding: 15px;
  background-color: #f0f9ff;
  border-radius: 4px;
}

.opportunity-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.opportunity-item {
  padding: 15px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  
  .opportunity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    
    .opportunity-title {
      font-weight: bold;
    }
    
    .opportunity-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      
      .opportunity-type {
        color: #606266;
        font-size: 12px;
      }
    }
  }
  
  .opportunity-content {
    margin-bottom: 10px;
    
    p {
      color: #606266;
      line-height: 1.5;
    }
  }
  
  .opportunity-footer {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #909399;
  }
}
</style>
